<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        body {
            display: flex;
        }
        div {
            margin: auto;
            width: 50%;
            text-align: center;
        }
        input {
            width: 200px;
            height: 30px;
            margin: 10px 0;
        }
        ul {
            list-style: none;
            padding: 0;
            font-size: 20px;
        }
    </style>
    <body>
        <div id="box">
            <h1>备忘录</h1>
            <input type="text" id="inp" />
            <ul>
                <li>1.akjshdjkas</li>
                <li>1.akjshdjkas</li>
                <li>1.akjshdjkas</li>
                <li>1.akjshdjkas</li>
            </ul>
        </div>
    </body>
    <script>
        //页面加载函数
        {
            1.判断本地存储是否有数据
                如果有数据，获取数据，把数据传给渲染函数
            2.添加数据
                绑定事件-调用添加函数
        }

        //渲染函数(data)
        {
            循环渲染数据
        }

        //添加函数
        {
            1.获取输入框的值
            2.判断输入框的值是否为空
                如果为空，不添加
            3.判断本地存储是否有数据
                如果有数据，获取数据，把新增的数据添加到数据中
                如果没有数据，创建一个数组，把新增的数据添加到数组中
                把数据存列表存储到本地存储
            4.把数据列表传给渲染函数
        }
    </script>
</html>
